<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../utils/flexible.js"></script>
    <script src="../utils/getUrlParams.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <link rel="stylesheet" href="../css/base.css">
    <link rel="stylesheet" href="../css/productlist.css">
    <script src="../js/productlist.js"></script>
</head>

<body>
    <div class="header" id="top">
        <img src="../assets/imgs/header_logo.png" alt="">
        <img src="../assets/imgs/header_app.png" alt="">
    </div>
    <div class="searchbox">
        <input type="text" placeholder="请输入你想比价的产品">
        <button>搜索</button>
    </div>

    <div class="nav">
        <a href="../index.html">首页</a> > <a class="categoryAll">全部分类</a> >
        <a class="replace" href="">电视</a> >
        <button>筛选</button>
    </div>

    <div class="container">
        <ul>
            
        </ul>
    </div>

    <div class="footer">
        <div class="more">
            <a>更多优惠信息>></a>
        </div>
        <div class="chart">
            <span>品牌排行</span>
        </div>
        <ul>
            <li>登入</li>
            <li>注册</li>
            <li><a href="#top">返回顶部</a></li>
        </ul>
        <p>手机APP下载 慢慢买手机版 -- 掌上比价平台</p>
        <p>m.manmanbuy.com</p>
    </div>


    <script>
        let href = getUrlParams(location.href);
        let html;
        let page;
        $.ajax({
            url: "http://chst.vip:1234/api/getproductlist?",
            data: {
                categoryid: href.categoryid,
                pageid: href.pageid
            }
        }).then(res => {
            // console.log(res);
            page = Math.ceil(res.totalCount / res.pagesize)
            creatLi(res.result);
            $(".container >ul >li").on("click", "button", clickBtnHandle)
            $(".container >ul >li ").on("click", "select", clickOptionHandle)
            $(".container >ul").on("click","li",clickLihandler)
            $(".categoryAll").click(function () {
                location.href = "./category.html";
            })
        })

        function clickLihandler(e) {
            let productid = $(this).attr("productid");
            let productname = $(this).find("p").first().text().trim();
            let categoryid = $(".nav .replace").attr("categoryid")
            let categoryname = $(".nav .replace").text();
            console.log(categoryid);
            // console.log(categoryname);
            // String.replit
            // console.log(productname.split(" ")[0]);
            location.href = "./productdetails.html?productid=" + productid + "&productname="+productname.split(" ")[0]+"&categoryname="+categoryname + "&categoryid=" +categoryid;
        }


        function clickOptionHandle(e) {
            e.preventDefault();
            e.stopPropagation();
            if ($(this).val() != href.pageid) {
                href.pageid = $(this).val();
                location.href = "./productlist.html?pageid=" + href.pageid + "&categoryid=" + href.categoryid;
            }

        }

        function clickBtnHandle(e) {
            e.preventDefault();
            e.stopPropagation();

            console.log(href.pageid);
            href.pageid = Number(href.pageid)
            if ($(this).prop("class") == "btn1") {
                href.pageid--;
            } else {
                console.log("object");
                href.pageid++;
            }
            if (href.pageid > 3) {
                href.pageid = 3;
            }
            if (href.pageid < 1) {
                // console.log("object");
                href.pageid = 1;
            }
            console.log(href.pageid);
            location.href = "./productlist.html?pageid=" + href.pageid + "&categoryid=" + href.categoryid;

        }

        function creatLi(data) {
            html = "";
            data.forEach(item => {
                // console.log(item);
                html += `
                <li productid="${item.productId}">
                    ${item.productImg}
                    <div class="right">
                        <p>
                            ${item.productName}
                        </p>
                        <p>${item.productPrice}</p>
                        <span>${item.productQuote}</span> <span>${item.productCom}</span>
                    </div>
                </li>
                `;
            });
            html += ` <li>
                <button class="btn1">上一页</button>
                <select name="" id="">`
            for (let i = 0; i < page; i++){
                html += `
                    <option value="${i+1}">${i+1}/${page}</option>
                `;
            }
            html += `</select>
                <button class="btn2">下一页</button>
            </li>`;
            $(".container ul").html(html);
            console.log(href);
            $(".nav .replace").attr("categoryid",href.categoryid).text(href.categoryname);
            $(".container ul li select").val(href.pageid);
        }
    </script>
</body>

</html>